<template>
	<view class="task-guide flex--col">
		<view class="guide-notice flex--row" >
			<image aria-label="任务指引" src="@/static/index/announcement.svg"></image>
			<view class="guide-notice-text text--thirdary-dark">
				<text>欢迎使用何远不到☆</text>
				<text>完成下列任务，开启出行之旅。</text>
			</view>
		</view>
		<view class="guide-task flex--row">
			<navigator class="guide-task-item" url="/pages/edit/edit">
				<image aria-label="完善信息任务" src="@/static/index/complete.svg" class="icon--large"></image>
				<view class="guide-task-text flex--row">
					<text class="text--thirdary-highlight">完善信息</text>
					<view class="icon" v-show="complete === 0">
						<image aria-label="未完成完善信息任务" src="@/static/ongoing/uncheck.svg" class="image-max-width"></image>
					</view>
					<view class="icon" v-show="complete === 1">
						<image aria-label="已完成完善信息任务" src="@/static/ongoing/checked.svg" class="image-max-width"></image>
					</view>
				</view>
			</navigator>
		
			<navigator class="guide-task-item" url="/pages/ident/ident">
				<image aria-label="认证身份任务" src="@/static/index/identify.svg" class="icon--large"></image>
				<view class="guide-task-text flex--row" >
					<text class="text--thirdary-highlight">认证</text>
					<view class="icon" v-show="role === 0">
						<image aria-label="未完成认证任务" src="@/static/ongoing/uncheck.svg" class="image-max-width"></image>
					</view>
					<view class="icon" v-show="role !== 0">
						<image aria-label="已完成认证任务" src="@/static/ongoing/checked.svg" class="image-max-width"></image>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
    export default{
		props:['role','complete']
		
	}
</script>

<style lang="scss" scoped>
	
	.text--thirdary-dark{
		font-size: 16px;
		font-weight: 700;
		color:#333;
	}
	
	.text--thirdary-highlight{
		font-size: 18px;
		font-weight: 700;
		color:$main-color--dark;
	}
	
	.task-guide{
		gap:24rpx;
		padding-top:32rpx;
	}
	
	.guide-notice{
		align-items: center;
		gap:8rpx;
		
		image{
			width:128px;
			height:96px;
		}
		text{
			display: block;
		}
	}
	.guide-task{
		width:100%;
		justify-content: center;
		gap:16rpx;
		
		&-item{
			@include border-four-roundings;
			flex:1;
			
			display:flex;
			flex-direction: column;
			align-items: center;
			gap:32rpx;
			
			padding:16rpx;
		}
		
		.guide-task-text{
			align-items: center;
		}
	}
</style>